<template>
  <view class="hospital-promotion-delete-container">
    <view class="page-header">
      <text class="page-title">删除医院促销活动</text>
    </view>

    <view v-if="loading" class="loading-container">
      <text>加载中...</text>
    </view>

    <view v-else class="delete-container">
      <view class="warning-box">
        <text class="warning-icon">⚠️</text>
        <text class="warning-text">您即将删除以下医院促销活动信息，此操作不可恢复！</text>
      </view>

      <view class="info-box">
        <view class="info-item">
          <text class="info-label">标题：</text>
          <text class="info-value">{{ promotion.title }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">折扣率：</text>
          <text class="info-value">{{ promotion.discount_rate }}%</text>
        </view>
        <view class="info-item">
          <text class="info-label">开始日期：</text>
          <text class="info-value">{{ formatDate(promotion.start_date) }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">结束日期：</text>
          <text class="info-value">{{ formatDate(promotion.end_date) }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">状态：</text>
          <text class="info-value">{{ promotion.status === 1 ? '启用' : '禁用' }}</text>
        </view>
      </view>

      <view class="confirm-box">
        <checkbox :checked="confirmed" @click="toggleConfirm" />
        <text class="confirm-text">我已确认要删除此医院促销活动</text>
      </view>

      <view class="action-buttons">
        <button class="btn-confirm" :disabled="!confirmed" @click="handleConfirmDelete">确认删除</button>
        <button class="btn-cancel" @click="handleCancel">取消</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

const promotionsObj = uniCloud.importObject('dh-hospital_promotions')

const loading = ref(true)
const confirmed = ref(false)
const promotionId = ref('')
const promotion = reactive({
  title: '',
  discount_rate: 0,
  start_date: null,
  end_date: null,
  status: 1
})

onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  promotionId.value = currentPage.options.id || ''
  
  if (promotionId.value) {
    loadData()
  }
})

async function loadData() {
  loading.value = true
  try {
    const res = await promotionsObj.getPromotion({ id: promotionId.value })
    Object.assign(promotion, res.data)
  } catch (err) {
    uni.showToast({ title: err.message || '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

function formatDate(timestamp) {
  if (!timestamp) return '-'
  const date = new Date(timestamp)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

function toggleConfirm() {
  confirmed.value = !confirmed.value
}

async function handleConfirmDelete() {
  if (!confirmed.value) {
    uni.showToast({ title: '请先确认删除操作', icon: 'none' })
    return
  }
  
  try {
    await promotionsObj.deletePromotion({ id: promotionId.value })
    uni.showToast({ title: '删除成功', icon: 'success' })
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  } catch (err) {
    uni.showToast({ title: err.message || '删除失败', icon: 'none' })
  }
}

function handleCancel() {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.hospital-promotion-delete-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.loading-container {
  padding: 100rpx;
  text-align: center;
  color: #999;
  font-size: 28rpx;
}

.delete-container {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
}

.warning-box {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
  border-radius: 8rpx;
  margin-bottom: 30rpx;
}

.warning-icon {
  font-size: 48rpx;
  margin-right: 20rpx;
}

.warning-text {
  flex: 1;
  font-size: 28rpx;
  color: #856404;
  line-height: 1.6;
}

.info-box {
  padding: 30rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  margin-bottom: 30rpx;
}

.info-item {
  display: flex;
  padding: 15rpx 0;
}

.info-label {
  width: 150rpx;
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
}

.info-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.confirm-box {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  margin-bottom: 30rpx;
}

.confirm-text {
  margin-left: 15rpx;
  font-size: 28rpx;
  color: #333;
}

.action-buttons {
  display: flex;
  gap: 20rpx;
}

.btn-confirm, .btn-cancel {
  flex: 1;
  padding: 25rpx;
  border-radius: 8rpx;
  font-size: 32rpx;
  border: none;
  cursor: pointer;
}

.btn-confirm {
  background-color: #dc3545;
  color: #fff;
}

.btn-confirm:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.btn-cancel {
  background-color: #6c757d;
  color: #fff;
}
</style>

